<script src="../../main.js"></script>
<template>
   <div class="article">
      <div class="ibox">
        <div class="ibox-content">
          <div class="acticle-com">
            <div class="listdetail">
              <div class="detail-title">
                <h2>{{detail.title}}</h2>
                <div>
                  <span>时间：{{detail.create_time | formatTime}}</span>
                  <span>来源：{{detail.from}}</span>
<!--                   <span>作者：{{detail.author}}</span> -->
                  <span>点击：{{detail.click}}次</span>
                </div>
              </div>
              <hr>
              <div class="detail-content" v-html="detail.content">

              </div>
            </div>
          </div>
          <div class="comment">
            <h2>评论</h2>
            <div class="comment_text">
              <textarea class="tweet-editor"  v-model="content" placeholder="发送动态" bind=""></textarea>
              <el-button type="primary" @click="submitComment" style="width: 10%" icon="el-icon-edit">评论</el-button>
            </div>
            <div class="social-feed-box" v-for="(item,index) in detail.comment">
              <div class="social-avatar">
                <div class="media-body">
                  <a href="#">
                    {{item.userip}}
                  </a>
                  <small class="text-muted">{{item.create_time}}</small>
                </div>
              </div>
              <div class="social-body">
                <p>
                  {{item.content}}
                </p>
              </div>
              <div class="reply">
                <el-badge class="item">
                  <el-button size="small">点赞{{432}}</el-button>
                </el-badge>
                <el-badge :value="detail.comment[index].reply.length" class="item" style="padding-left:20px">
                  <el-button size="small" @click="showinput(index)">回复</el-button>
                </el-badge>
                <el-input v-if="input === index" v-model="item.value" placeholder="请输入回复内容" style="margin-top:10px">
                  <el-button @click="hanldReply(index)" slot="append" icon="el-icon-edit"></el-button>
                </el-input>
              </div>
              <div class="reply_content" v-for="(item,key) in detail.comment[index].reply">
                <div class="social-avatar">
                  <div class="media-body">
                    <a href="#">
                      {{item.userip}}
                    </a>
                    <small class="text-muted">{{item.create_time}}</small>
                  </div>
                </div>
                <div class="social-body">
                  <p>
                    {{item.reply_content}}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        input:-1,
        reply_content:[],
        articleId:0,
        content: '',
        detail:{}
      }
    },
    mounted () {
      this.articleId = this.$route.query.id;
      this.getDatas()
      console.log(this.articleId);
    },
    methods: {
      getDatas(){
        let params = {
          article_id: this.articleId,
        };
        this.$api.getNewsdatail(params)
         .then(res => {
           console.log(res)
            this.detail = res.data
         })
      },
      showinput(index){
         this.input = index
      },
      hanldReply(index){
        console.log(this.detail.comment[index]);
        let params = {
          new_id: this.articleId,
          comment_id: this.detail.comment[index].id,
          reply_content:this.detail.comment[index].value,
        };
        this.$api.submitReply(params)
         .then(res => {
           console.log(res)
            this.getDatas()
            this.content = ""
            this.$message({
              message: '回复成功',
              type: 'success'
            });
         })
       },
      submitComment(){
        let params = {
          new_id: this.articleId,
          content:this.content,
        };
        this.$api.submitComment(params)
         .then(res => {
           console.log(res)
            this.getDatas()
            this.content = ""
            this.$message({
              message: '评论成功',
              type: 'success'
            });
         })
      }
    },
    components: {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>

@import './index.less';

</style>
